<script setup>
  import { ref, getCurrentInstance, onMounted } from 'vue'
import Loading from '../../components/loading.vue';
import { useRouter } from "vue-router";
  
const { proxy } = getCurrentInstance()

const infoBg = new URL('../../assets/img/info_bg.jpg', import.meta.url).href
const cloud = new URL('../../assets/img/cloud.png', import.meta.url).href
const logo = new URL('../../assets/img/logo.png', import.meta.url).href
const loading = ref(true)

/**
 * 跳转
 * @param {*} e
 */
 const goto = (e) => {
  if (!e) return
  window.open(e)
}

/**  */
const getTraceBackData = async () => {
  try {
    let res = await proxy.$api.call("qin.getTraceBackData", {
      traceBack: traceabilityCode.value
    })
    if (!res.res) return
    content.value = res.testingCenter ? res.testingCenter.map(v => Object.assign(v, {fold: false})) : []
  } finally {
    loading.value = false
  }
}

const traceabilityCode = ref("");
onMounted(() => {
  traceabilityCode.value = useRouter().currentRoute.value.query.traceabilityCode
  if (!traceabilityCode.value) {
    toast.fail('信息不存在')
    loading.value = false
    return
  }
  getTraceBackData()
})

const content = ref([
  // {
  //   title: '检测设备介绍',
  //   icon: 'icon-jiancexiangmu',
  //   color: 'green',
  //   fold: false,
  //   content: []
  // },
  // {
  //   title: '检测中心介绍',
  //   icon: 'icon-yungongchang',
  //   color: 'red',
  //   fold: false,
  //   content: []
  // }
])

document.title = '检测中心'
</script>
<template>
  <Loading  v-if="loading"></Loading>
  <div class="top" :style="{ backgroundImage: `url(${infoBg})` }">
    <div class="top-cloud">
      <img :src="cloud" alt="" />
    </div>
    <div class="top-logo">
      <img :src="logo" alt="" />
    </div>
  </div>
  <div class="content">
    <div class="content-title">检测实验</div>
    <div
      class="content-item"
      v-for="(item, index) in content"
      :key="index"
      :class="item.fold ? 'content-item-fold' : ''"
    >
      <div class="title-flex margin-b" :style="{color: item.color}" @click="item.fold = !item.fold">
        <div class="content-item-title">
          <!-- <i class="iconfont" :class="item.icon"></i> -->
          <div>{{ item.group }}</div>
        </div>
        <i class="iconfont icon-xiajiantou- icon-fold" :class="{'icon-fold-reverse': item.fold}"></i>
      </div>
      <template v-for="(node, nodeIndex) in item.data" :key="nodeIndex">
        <template v-for="(element, key, eIndex) in node" :key="eIndex">
          <div class="content-item-subtitle" v-if="key === 'title' && node.title">{{ node.title }}</div>
          <div class="content-item-text" v-else-if="key === 'content' && node.content">
            {{ node.content }}
          </div>
          <div class="content-item-img" v-else-if="key === 'image' && node.image" @click="goto(node.url)">
            <img :src="node.image" alt="" />
          </div>
        </template>
      </template>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url(../../assets/css/common.less);
</style>
